<template>
    <div class="wrapper">
        <h1 class="title">文章列表</h1>
        <div class="article">
            <el-button class="addBtn" @click="handleAdd">新增+</el-button>
            <el-table :data="articleList" border stripe>
                <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="日期"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span>{{ scope.row.create_time }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleLook(scope.row)">查看</el-button>
                        <el-button size="mini" type="success" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelect(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                articleList:[]
            }
        },
        methods:{
            handleAdd() {
                this.$router.push({name:'editArticle'})
            },
            handleLook(row) {
                let id = row.id
                this.$router.push({path:'/detail/'+id})
            },
            handleEdit(row) {
                let id = row.id;
                this.$router.push({name:'editArticle',params: {id:id}})
            },
            handleDelect(row){
                let id = row.id
                this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                  this.$message({
                    type: 'success',
                    message: `文章删除成功!`
                  });
                    // 发起删除的网络请求
                    this.$http.post('/api/article/delete',{
                        article_id:id
                    })
                    .then(res => {
                        if(res.data.code === 0){
                            //发起删除请求操作
                            this.$message({
                                type: 'success',
                                message: `${id}文章删除成功!`
                            });
                            setTimeout(() => {
                                location.reload()
                            }, 500);  
                        }
                    }).catch(e=>{
                        console.log(e)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            getMyBlogList(){
               this.$http.get('/api/article/myList').then(res => {
                 console.log(res);
                 if(res.data.code === 0){
                    this.articleList = res.data.data
                    console.log(this.articleList);
                 }
               })
            }
        },
        created() {
            this.getMyBlogList()
        },
    }
</script>

<style lang="scss" scoped>
.title {
    margin: 30px 0;
    text-align: center;
    font-weight: bold;
    font-size: 28px;
}
.article {
    .addBtn {
        float: right;
        margin-bottom: 20px;
    }
}
/deep/ .el-table {
    .cell {
        text-align: center;
    }
}
</style>